import { Button, Modal, Tabs, TabsProps } from "antd";
import { PenChildProps } from "@/types";
import React, { useEffect, useState } from "react";
import { deepClone, Pen } from "@meta2d/core";
import AnimationFrameItem from "@/components/Configuration/PenProps/components/AnimationFrameItem.tsx";
type TargetKey = React.MouseEvent | React.KeyboardEvent | string;
interface Props extends PenChildProps {
  open: boolean;
  onOk: () => void;
  onCancel: () => void;
}

function AnimationFrames(props: Props) {
  const [items, setItems] = useState<TabsProps["items"]>([]);
  const handleAdd = () => {
    props.setPenValue("frames", [...(props.penOptions.frames || []), {}]);
  };
  const onItemChange = (key: keyof Pen, value: any, index: number) => {
    let newFrames = deepClone(props.penOptions.frames) || [];
    newFrames[index][key] = value;
    props.setPenValue("frames", newFrames);
  };
  useEffect(() => {
    if (props.penOptions.frames != undefined) {
      let newItems = props.penOptions.frames.map((_item, index) => {
        let frameItem =
          props.penOptions.frames == undefined
            ? {}
            : props.penOptions.frames[index];
        return {
          key: "AnimationFrames" + index,
          label: `动画帧${index + 1}`,
          children: (
            <AnimationFrameItem
              index={index}
              item={frameItem}
              onChange={onItemChange}
            />
          ),
        };
      });

      setItems(() => newItems);
    }
  }, [props.penOptions]);
  const handleOk = () => {
    props.onOk();
    if (props.penOptions.frames != undefined) {
      let allDuration = 0;
      props.penOptions.frames.forEach((item) => {
        if (typeof item.duration == "number") {
          allDuration += item.duration;
        }
      });
      props.setPenValue("showDuration", allDuration);
    }
  };
  const onEdit = (targetKey: TargetKey, _action: "add" | "remove") => {
    if (items) {
      let index = items.findIndex((v) => v.key == targetKey);
      if (index != -1) {
        let newFrames = deepClone(props.penOptions.frames);
        newFrames?.splice(index, 1);
        props.setPenValue("frames", newFrames);
      }
    }
  };
  const afterOpenChange = (open: boolean) => {
    if (open) {
      if (
        props.penOptions.frames == undefined ||
        props.penOptions.frames.length <= 0
      ) {
        handleAdd();
      }
    }
  };
  return (
    <>
      <Modal
        width={1300}
        destroyOnClose={true}
        title="自定义动画帧"
        open={props.open}
        centered
        afterOpenChange={afterOpenChange}
        footer={(_, { OkBtn }) => (
          <>
            <Button type={"primary"} onClick={handleAdd}>
              新增动画帧
            </Button>
            <OkBtn />
          </>
        )}
        onOk={handleOk}
        onCancel={props.onCancel}
      >
        <Tabs
          type="editable-card"
          defaultActiveKey={`AnimationFrames${
            props.penOptions.frames?.length || 0
          }`}
          items={items}
          onEdit={onEdit}
          hideAdd
        />
      </Modal>
    </>
  );
}
export default React.memo(AnimationFrames);
